<template>
    <div>
        <div> Home </div>
        <!-- <Lifecycle v-if="showLifecycle" /> -->

        <!-- <SetupLifecycle v-if="showLifecycle" />
        <button @click="showLifecycle = !showLifecycle">切换Lifecycle</button> -->

        <!-- <SetupMethod /> -->
        <!-- <SetupMethod :msg="msg" :count="count" @onSetupClick="onSetupClick" />
        <div>
            {{ msg }} - {{ count }}
        </div>
        <button @click="onHandleClick">更新MSG</button> -->

        <!-- <ProvideInject /> -->

        <!-- <Computed /> -->

        <!-- <Watch /> -->

        <!-- <Fragment class="fragment" id="fg" /> -->

        <!-- <TeleportDemo /> -->

        <!-- <SuspenseDemo /> -->

        <!-- <EmitOption @click="onEmitClick" @onHandleClick="onHandleClick" /> -->
        <!-- <EmitOption
            @click="onEmitClick"
            @onHandleClick="onHandleClick"
            :title.sync="title"
        /> -->
        <!-- 组件内调用this.$emit('update:title', newVal) -->
        <!-- <EmitOption
            @click="onEmitClick"
            @onHandleClick="onHandleClick"
            v-model:title="title"
        /> -->
        <!-- 
            v-model:title="title" 相当于
            :modelValue="title" @update:modelValue="title = $event"
        -->

        <!-- <SetupSuger msg="Hello Vue 3" class="setup-suger" @onSugerClick="onSugerClick">
            <template #header>
                <div>
                    Header
                </div>
            </template>
        </SetupSuger> -->

        <!-- <Other /> -->

        <!-- <LogicReuse /> -->

        <!-- <Tsx /> -->

        <!-- <PureTsx /> -->

        <!-- <UseRouter /> -->

        <UseStore />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Lifecycle from '../../components/1.Lifecycle.vue'
import SetupLifecycle from '../../components/2.Setup_Lifecycle.vue'
import SetupMethod from '../../components/3.setup.vue'
import ProvideInject from '../../components/4.provide&inject.vue'
import Computed from '../../components/5.computed.vue'
import Watch from '../../components/6.watch.vue'
import Fragment from '../../components/7.Fragment.vue'
import TeleportDemo from '../../components/8.Teleport.vue'
import SuspenseDemo from '../../components/9.Suspense.vue'
import EmitOption from '../../components/10.emitOption.vue'
import SetupSuger from '../../components/11.setSuger.vue'
import Other from '../../components/12.Other.vue'
import LogicReuse from '../../components/13.LogicReuse.vue'
import Tsx from '../../components/14.tsx.vue'
import PureTsx from '../../components/14.tsx'
import UseRouter from '../../components/15.router.vue'
import UseStore from '../../components/16.vuex.vue'

export default defineComponent({
    name: 'HomeIndex',
    components: {
        Lifecycle,
        SetupLifecycle,
        SetupMethod,
        ProvideInject,
        Computed,
        Watch,
        Fragment,
        TeleportDemo,
        SuspenseDemo,
        EmitOption,
        SetupSuger,
        Other,
        LogicReuse,
        Tsx,
        PureTsx,
        UseRouter,
        UseStore
    },
    data() {
        return {
            showLifecycle: true,
            msg: 'setup method',
            count: 0,
            title: 'Hello Vue3'
        }
    },
    mounted() {
        // setInterval(() => {
        //     this.msg += 'a'
        // }, 1000)
    },
    methods: {
        onSetupClick() {
            console.log('onSetupClick');
        },
        onHandleClick() {
            this.msg = 'Hello Setup'
            this.count += 1
            console.log(123);
        },
        onEmitClick() {
            console.log('native click');
        },
        onSugerClick() {
            console.log('onSugerClick');
        }
    }
})
</script>